<template>
	<view style="width: 100%; height: 100%;">
		<uni-nav-bar dark :fixed="true" shadow bgimage="linear-gradient(to right, #4facfe 0%, #00f2fe 100%)" status-bar
			title="尚图" @clickLeft="back" />
		<view class="uni-nav-bar-empty-v"></view>
		<view class="searchv">
			<image src="https://shangtu.obs.cn-north-4.myhuaweicloud.com/img/xiaoleng.png"
				style="width: 60rpx;height: 60rpx;border-radius: 50%;"></image>
			<view style="width: 70%;">
				<uni-search-bar v-model="searchValue" @blur="blur" @focus="search" @input="input" @cancel="cancel"
					@clear="clear" cancelButton="none" textColor="#494949">
				</uni-search-bar>
			</view>
			<text class="btn-grad" @click="search">搜索</text>
		</view>
		<view class="menuv">
			<view class="menu-container">
				<text :class="{ 'menu-class': !item.isActive, 'menu-active-class': item.isActive }"
					v-for="(item, index) in menulist" :key="index" v-on:click="chooseMenu(item)">{{ item.name }}</text>
			</view>
			<image src="https://shangtu.obs.cn-north-4.myhuaweicloud.com/img/%E6%9B%B4%E5%A4%9A%E5%88%97%E8%A1%A8.png"
				style="width:25rpx;height:25rpx;"></image>
		</view>
		<view class="ucenter-line"></view>
		<view class="swiper-container">
			<view style="padding-top: 10rpx;padding-bottom: 10rpx;">
				<swiper autoplay="true" indicator-dots indicator-color="rgba(255, 255, 255, 1)"
					indicator-active-color="#3688FF" style="height:276rpx;width:100%;" interval="3000">
					<swiper-item class="grace-swiper-item"
						style="display: flex;justify-content:center;align-items:center;flex-wrap: wrap;"
						v-for="(item, index) in artcileList" :key="index" :index="index">
						<image class="swiper-image" style="width: calc(100vw - 30rpx);"
							:src="item.overview.imgs[0].url" @click="toArticle(item.id)"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="product-container">
			<view v-if="recommendProducts.length > 0" v-for="(products, index) in recommendProducts" :key="index" :index="index">
				<view class="ucenter-line"></view>
				<view class="productv" v-if="products.length >0  && products[0].merchantIcon != null && products[0].merchantName != null">
					<view class="merchant-title" style="padding-inline: 20rpx;"
						v-on:click="toMerchant(products[0].merchantId)">
						<view style="width: 90%;display: flex;justify-content:left;align-items:center;flex-wrap: wrap;">
							<image :src="products[0].merchantIcon"
								style="width: 50rpx;height: 50rpx;border-radius: 50%;"></image>
							<text style="margin-left: 20rpx;color: #e67e22;">{{products[0].merchantName}}</text>
						</view>
						<image src="https://shangtu.obs.cn-north-4.myhuaweicloud.com/img/%E6%9B%B4%E5%A4%9A.png"
							style="width: 50rpx;height: 50rpx;border-radius: 50%;margin-right: 0rpx;"></image>
					</view>
					<scroll-view scroll-x="true"
						style="padding: 10rpx; white-space: nowrap;width: 100%;overflow-x: hidden;background-color: #edfafe ;">
						<view
							style="width: 172rpx;margin-left: 8rpx; display: inline-block;border-radius: 10rpx;background-color: white; "
							v-for="(product, index2) in products" :key="index2" :index="index2"
							@click="chooseProduct(product.id)">
							<!-- <text class="grace-gtbg-blue">标签</text> -->
							<image :src="product.img" style="width: 172rpx; height: 172rpx;border-radius: 10rpx;">
							</image>
							<view>
								<!-- <text style="width: 50%;font-size: 24rpx;font-weight: 400;color: #666666;">&nbsp;南华野生菌</text> -->
								<text
									style="color: #e67e22;font-weight: 400;font-size: 24rpx;">&nbsp;¥{{product.price}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-if="products.length >0 && products[0].place != null" style="margin-bottom: 10rpx;padding-left: 20rpx;" @click="enterMap(products[0].merchantId)">
					<uni-icons type="location" color="#5cbcf1" size="15"></uni-icons><text
						style="color: #5cbcf1; font-size: 24rpx;">{{products[0].place}}(5.3km)</text>
				</view>
			</view>
			<view class="ucenter-line"></view>
		</view>

		<view class="empty-v" style="background-color: white;height: 200rpx;width: 100%;"></view>
		<tabBar :pageIndex="0" :textType="1" @toTab="toTab"></tabBar>
	</view>
</template>

<script>
	import graceSwiper from "../../graceUI/components/graceSwiper.vue";
	import tabBar from '@/components/tabBar/tabBar.vue';
	import articleApi from '@/api/article';
	import slideView from "@/graceUI/components/graceSlideView.vue";
	import productEsApi from "@/api/productEs.js"
	export default {
		components: {
			tabBar,
			slideView,
			graceSwiper
		},
		data() {
			return {
				artcileList: [],
				moveIndex: 1,
				pollId: null,
				currentPage: 1,
				pageSize: 10,
				keyWord: '',
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}],
				startX: 0,
				endX: 0,
				searchValue: '篮球',
				recommendProducts: [{
					id: "1860200812177907713",
					img: "https://shangtu-public.obs.cn-north-4.myhuaweicloud.com/36d47c4e219589d3098b8ecf021456b2",
					location: {
						lat: 40.080303,
						lon: 116.139793
					},
					merchantCode: "000002",
					merchantIcon: "https://shangtu-public.obs.cn-north-4.myhuaweicloud.com/44bf46962f837de2e40c4e3da7d1d1f4",
					merchantId: "1857035832569954308",
					merchantName: "小冷科技",
					place: "优嘉便利店(苏家坨店)",
					price: 100.0,
					productCode: "000001",
					productName: "野生菌",
					searchKey: "#野生菌"
				}],
				menulist: [{
						isActive: true,
						name: '推荐',
						id: 0
					}, {
						name: '附近',
						id: 1
					}, {
						name: '男装',
						id: 2
					}, {
						name: '女装',
						id: 3
					},
					{
						name: '童装',
						id: 4
					}
				]
			}
		},
		onLoad: function(options) {
			
		},
		onReady() {
			this.getRecommendProducts();
			this.getArtcileList();
		},
		methods: {
			// 点击切换页面事件
			toTab(data) {
				console.log(data);
				uni.switchTab({
					url: data.pageUrl
				});
			},
			search() {
				console.log("11")
				uni.switchTab({
					url: "../search/search"
				});
			},
			toArticle(id) {
				uni.navigateTo({
					url: "/pages/articleDetail/articleDetail?articleId=" + id
				})
			},
			toMerchant(id) {
				uni.navigateTo({
					url: "/pages/merchant/merchant?merchantId=" + id
				})
			},
			chooseMenu(item) {
				console.log(item)
				for (let i = 0; i < this.menulist.length; i++) {
					if (this.menulist[i].id === item.id) {
						this.menulist[i].isActive = true;
					} else {
						this.menulist[i].isActive = false;
					}
				}
			},
			// 检测向左滑动
			handleTouchStart(e) {
				console.log('Touch start event triggered');
				this.startX = e.touches[0].pageX;
			},
			handleTouchEnd(e) {
				console.log('Touch start event triggered');
				this.endX = e.changedTouches[0].pageX;
				// 判断滑动方向
				if (this.startX > this.endX) {
					this.currentView = 1
				}
			},
			enterMap(merchantId) {
				uni.navigateTo({
					url: "/pages/map/map?merchantId="+merchantId
				})
			},
			backProductView() {
				this.currentView = 0,
					this.moveIndex = null // 恢复滑动
			},
			chooseProduct(id) {
				uni.navigateTo({
					url: "/pages/productDetail/productDetail?productId="+id
				})
			},
			getRecommendProducts() {
				let userId = getApp().globalData.userInfo.userId;
				productEsApi.recommend(userId, 5).then(res => {
					this.recommendProducts = res;
					console.log(res)
				})
			},
			getArtcileList() {
				articleApi.query(1, 5, null).then(res => {
					this.artcileList = res.content;
					console.log(res)
				})
			},
			itemTap(index) {
				console.log(index)
				this.moveIndex = index
				console.log(this.moveIndex)
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.searchv {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		background-color: white;

		.btn-grad {
			padding-inline: 20rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			background-image: linear-gradient(to right, #36D1DC 0%, #5B86E5 51%, #36D1DC 100%);
			margin: 10px;
			text-align: center;
			text-transform: uppercase;
			transition: 0.5s;
			background-size: 200% auto;
			color: white;
			box-shadow: 0 0 20px #eee;
			border-radius: 10px;
			display: block;
		}

		.btn-grad:hover {
			background-position: right center;
			/* change the direction of the change here */
			color: #fff;
			text-decoration: none;
		}

	}

	.menuv {
		background-color: white;
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: left;
		align-items: center;
		flex-wrap: wrap;

		.menu-container {
			width: calc(100% - 40rpx);

			.menu-class {
				padding-bottom: 10rpx;
				margin-inline: 20rpx;
				font-size: 30rpx;
				color: #6e6e6e;
			}

			.menu-active-class {
				padding-bottom: 10rpx;
				margin-inline: 20rpx;
				color: #00c5ff;
				border-bottom: 2px solid #00c5ff;
				font-weight: bold;
			}
		}

	}

	.product-container {
		.productv {
			padding-top: 20rpx;
			padding-bottom: 10rpx;
			background-color: white;

			.merchant-title {
				background-color: white;
				display: flex;
				justify-content: left;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 10rpx;
			}

			.contentv {
				line-height: 50rpx;
				color: #555555;
			}

			.photoesv {
				padding-top: 10rpx;
				padding-bottom: 10rpx;
			}

			.product-buttonv {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: auto auto auto;
				gap: 5rpx;
				height: 70rpx;
				border-top: #e5e7e9 1rpx solid;

				view {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;
				}
			}
		}

	}

	.map-container {
		height: calc(100vh - 44px - 200rpx);

		.back-product-view {
			position: fixed;
			left: 0;
			bottom: 50vh;
			z-index: 999;
			width: 35rpx;
			height: 250rpx;
			background-color: black;
			opacity: 0.6;
			color: #FFFFFF;
			border: none;
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0rpx -10rpx 20rpx #e2e2e2;
		}
	}

	.ucenter-line {
		height: 10rpx;
		background-color: #f8f9f9;
	}

	.img-card-item {
		overflow: hidden;
		font-size: 0;
		position: relative;
	}

	.img-card-bgTitle {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-around;
		line-height: 40rpx;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		// background-color: rgba(0, 0, 0, 0.2);
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.absolute-rt {
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0;
	}
</style>